<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page异步</title>
</head>
	<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		//$(document).ready(function(){});
		$(function (){
			aaa(1);
		});

		
		function pageChange(xxx){
			aaa(xxx);
		}

		var json={
			"currentPage":1,      //1,然后下面函数写this.currentPage=ggg;
			"pageSize":12
		};
		function aaa(ggg){
			json.currentPage=ggg;
			$.ajax({
				type:"post",
				data:json,
				url:"${pageContext.request.contextPath}/page3.doo",
				success:function(data){
				//	alert(data.lists);
					var content="<tr><th><input type='checkbox' id='all' onclick='al()'/></th><th>id</th><th>用户名</th><th>密码</th><th>权限</th></tr>";
					$.each(data.lists,function(i,n){
						content+="<tr><td><input type='checkbox' id=single"+(((data.currentPage-1)*data.pageSize)+i+1)+" name="+n.username+"/></td><td>"+(((data.currentPage-1)*data.pageSize)+i+1)+"</td><td>"+n.username+"</td><td>"+n.password+"</td><td>"+
							n.permissions+"</td></tr>";
					});
					$("#t").html(content);



					
					var content2='';
					if(data.currentPage==1){
						content2+='<a href="#">上一页</a>';
					}else{
						content2+='<a href="#" onclick="pageChange('+(data.currentPage-1)+')">上一页</a>';
					}

					for(var i=1;i<=data.pages;i++){
						content2+='<a href="#" onclick="pageChange('+i+')">'+i+'</a>'
					}
					
					if(data.currentPage==data.pages){
						content2+='<a href="#">下一页</a>';
					}else{
						content2+='<a href="#" onclick="pageChange('+(data.currentPage+1)+')">下一页</a>';
					}
					$("#d").html(content2);
				}
			});
		}

/* 
		$("#c").click(function (){
			alert("wao");
		//	var pageText=$("#p").val();
		//	json.pageText=pageText;
		//	aaa(1); 
		});  */

		/* $("body").on("click","#c",function(){
			alert("yeye");
		}); */

		function b(){
			var pageText=$("#p").val();
			json.pageText=pageText;
			aaa(1);
		}


		function al(){
			var che=$("#all").checked;
			$("table tr td input[type='checkbox']").prop("checked",che);
		}
		
		
		function d(){
			var alll=$("table tr td input:checked");
			if(alll.length==0){
				alert("没有需要删除的对象");
				return false;
			}
			/* var vara="";
			$.each(alll,function(i,n)){
				if(i!=0){
					vara+="&";
				}
				vara+="id="+n.id;
			} */
			var jsonObj={};
			$.each(alll,function(i,n){
				jsonObj["lists["+i+"].id"]=n.id;
				jsonObj["lists["+i+"].name"]=n.name;
			});
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/delete.do",
				//data:vara,
				data:jsonObj,
				success:function(){
					widow.location.href="${pageContext.request.contextPath}/page3.do";
				}
			});
		}
	</script>
<body>
	<input type="text" placeholder="请输入查询条件" id="p" name="pageName"><button type="button" onclick="b()">搜索</button>
	<button onclick="window.location.href='${pageContext.request.contextPath }/add.htm'">新增</button>
	<button onclick="d()">删除</button>
	<!-- <form >
		<input type="text" placeholder="请输入查询条件" id="p" name="pageName">
		<input type="submit" value="搜索" id="b">
	</form> -->
	<table id="t"></table>
	<div id="d"></div>
</body>
</html>